<template>
  <div class="header w">
    <!-- logo -->
    <div class="logo">
      <!-- 实际开发中h1只给logo，目的是让搜索引擎认识到这个网站 -->
      <h1>
        <a href="#" title="bookstore">网上书城</a>
      </h1>
    </div>
    <div class="search">
      <el-input placeholder="好书优铺尽在这里！" v-model="input" class="input-with-select">
        <el-select v-model="select" slot="prepend">
          <el-option label="书籍" value="1"></el-option>
          <el-option label="店铺" value="2"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="goToSearch()">搜索</el-button>
      </el-input>
    </div>
    <div class="shopcar">
      <el-badge :value="count" :max="99" class="item">
        <el-button type="danger" size="big" plain @click="goToShoppingcart()">
          <i class="el-icon-shopping-cart-2"></i>
          <i>我的购物车</i>
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </el-badge>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isLogined: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  data() {
    return {
      select: '1',
      input: '',
      count: '0',
    };
  },
  watch: {
    isLogined: function() {
      this.sumShoppingcart();
    }
  },
  methods: {
    goToSearch() {
      if(this.input.trim() != '') {
        console.log("can search: " + this.select + " " + this.input);
        this.$emit('changeSearch', true, this.select, this.input);
      } else {
        console.log("cannot search");
        this.select = '1';
        this.$emit('changeSearch', false, this.select, this.input);
      }
    },
    goToShoppingcart() {
      this.$parent.goToShoppingcart();
    },
    sumShoppingcart() {
      if(this.isLogined) {
        var url = process.env.URL_HEAD + "/sc/shoppingcart/shoppingcart/sum";
        // var url = process.env.URL_HEAD + "/api/sc/shoppingcart/shoppingcart/sum";
        this.$http
          .get(url, {
            withCredentials: true,
          })
          .then(
            (response) => {
              console.log("connect " + url + " success");
              console.log(response);
              console.log(response.body.cartSum);
              this.count = response.body.cartSum;
            },
            (response) => {
              console.log("initShoppingcart error: cannot connect " + url);
              this.count = 0;
            }
          );
      } else {
        this.count = 0;
      }
    }
  },
  mounted() {},
};
</script>

<style scoped>
.header {
  position: relative;
  height: 105px;
  /* background-color: purple; */
}
.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 224px;
  height: 105px;
}
.logo a {
  display: block;
  width: 224px;
  height: 105px;
  background: url(../assets/img/logo.png) no-repeat;
  font-size: 0;
}
.search {
  position: absolute;
  top: 30px;
  left: 350px;
  width: 550px;
}
.el-select {
  width: 75px;
}
.shopcar {
  position: absolute;
  top: 30px;
  right: 40px;
  height: 40px;
  color: red;
  line-height: 37.5px;
}
.shopcar .item {
  color: red;
}
</style>